<template>
  <div class="common-layout">
    <el-container>

      <el-aside >
                <h5 class="mb-2">爱宠居</h5>
                <el-menu
                    active-text-color="#ffd04b"
                    background-color="transparent"
                    class="el-menu-vertical-demo"
                    default-active="2"
                    text-color="#fff"
                    @open="handleOpen"
                    @close="handleClose"
                >
                    <el-sub-menu index="1">
                    <template #title>
                      <router-link to="/home/data">
                      <span>数据中心</span>
                      </router-link>
                    </template>
                        <router-link to="/home/data/basedata">
                        <el-menu-item index="1-1">实时数据</el-menu-item>
                        </router-link>
                        <router-link to="/home/data/customer">
                        <el-menu-item index="1-2">客户数据</el-menu-item>
                        </router-link>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                    <template #title>
                      <router-link to="/home/indent">
                        <span>订单管理</span>
                      </router-link>
                    </template>
                        <router-link to="/home/indent/allindents">
                        <el-menu-item index="2-1">全部订单</el-menu-item>
                        </router-link>
                        <router-link to="/home/indent/waitpay">
                        <el-menu-item index="2-2">待支付订单</el-menu-item>
                        </router-link>
                        <el-menu-item index="2-3">待发货订单</el-menu-item>
                        <el-menu-item index="2-4">待收获订单</el-menu-item>
                        <el-menu-item index="2-5">已取消订单</el-menu-item>
                        <el-menu-item index="2-6">异常订单</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                    <template #title>
                      <router-link to="/home/commodity">
                        <span>商品管理</span>
                      </router-link>
                    </template>
                        <router-link to="/home/commodity/append">
                        <el-menu-item index="3-1">全部商品</el-menu-item>
                        </router-link>  
                        <router-link to="/home/commodity/bbb">
                        <el-menu-item index="3-2">商品分类</el-menu-item>
                        </router-link>  
                    </el-sub-menu>
                    <el-sub-menu index="4">
                    <template #title>
                      <router-link to="/home/promotion">
                        <span>促销管理</span>
                      </router-link>
                    </template>
                        <router-link to="/home/promotion/huodong">
                        <el-menu-item index="4-1">秒杀管理</el-menu-item>
                        </router-link>
                        <router-link to="/home/promotion/discounts">
                        <el-menu-item index="4-2">优惠卷</el-menu-item>
                         </router-link>
                         <router-link to="/home/promotion/iconshow">
                        <el-menu-item index="4-2">随便图标</el-menu-item>
                        </router-link>
                    </el-sub-menu>
                </el-menu>
        </el-aside>


      <el-container>
        <el-header>
          <div>
              <el-button type="warning" round @click="tologin">登录</el-button>
              <el-button type="danger" round>注册</el-button>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
export default {
  setup() {
    const router = useRouter();
    const tologin = () =>{
      router.push('/login')
    }
    return {tologin}
  },
}
</script>
<style lang="less">
.el-container {
  width: calc(100%-231px);
  min-height: 100vh;
  margin-left: 16px;
  .el-header {
    width: 100%;
    height: 90px;
    border-radius: 10px;

    background: rgb(64, 175, 200);
    >div{
      float: right;
      line-height:90px;
    }

  }
  .el-main {
    width: 100%;
    min-height: calc(100%-105px);


    border-radius: 10px;
  }
}

.el-aside{
    width: 200px;
background: #70AFDA!important;


}
.tac {
  font-size: 18px;
  font-family: YouYuan;
  font-weight: 400;
  color: #333333;
}
.mb-2 {
  margin-top: 38px;
  padding-left: 60px;
}
</style>